<template>
	<view class="home-box">
		<view class="top-hed" :style="{'top':statusBarHeight+'px','height':titleBarHeight+'px'}">
			<view class="cont">
				绮径
			</view>
		</view>
		<image src="http://testmini.color-path.com/mini/image/home_bg.png" class="bg" mode=""></image>
		<!-- <scroll-view scroll-y="true" :style="{height:scrollH+'rpx'}"> -->
			<view class="tab">
				<!-- <view class="item" @tap="goUrl('/pagesB/tutorial/list')">
					<image src="http://testmini.color-path.com/mini/image/home01.png" class="img" mode=""></image>
					<view class="cont-txt">
						使用教程
						<view class="desc">
							<view class="l">立即学习美甲绘画教程</view>
							<image src="../../static/play.png" class="play" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item" @tap="goH5Url">
					<image src="http://testmini.color-path.com/mini/image/home02.png" class="img" mode=""></image>
					<view class="cont-txt">
						AI作画
						<view class="desc">
							<view class="l">AI定制你的专属美甲</view>
							<image src="../../static/play.png" class="play" mode=""></image>
						</view>
					</view>
				</view> -->
				<view class="item" @tap="goUrl('/pagesA/gallery/gallery')">
					<image src="http://testmini.color-path.com/mini/image/home03.png" class="img" mode=""></image>
					<view class="cont-txt">
						美甲样式库
						<view class="desc">
							<view class="l">精美有趣的美甲艺术</view>
							<image src="../../static/play.png" class="play" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item" @tap="goUrl('/pagesA/goods/goodsInfoList')">
					<image src="http://testmini.color-path.com/mini/image/home04.png" class="img" mode=""></image>
					<view class="cont-txt">
						绮径商城
						<view class="desc">
							<view class="l">寻找你需要的精美商品</view>
							<image src="../../static/play.png" class="play" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <button @tap="wxLogin" style="margin-bottom: 80px;">用户登录</button> -->
		<!-- </scroll-view> -->
		<Tabbar :current="0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabBar.vue'
	import { userWxLogin,getQuerylist } from '@/api/user.js'
	export default {
		components:{
			Tabbar
		},
		data() {
			return {
				title: '',
				titleBarHeight: '',
				statusBarHeight: '',
				merchantId: ''
			}
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation: false
			// })
		},
		onLoad(ops) {
			// uni.navigateTo({
			// 	url: '/pagesA/ai/create'
			// })
			// uni.setStorageSync('merchantId', ops.merchantId)
			this.merchantId = ops.merchantId
			this.titleBarHeight = getApp().globalData.titleBarHeight //胶囊高度
			this.statusBarHeight = getApp().globalData.statusBarHeight //胶囊到（顶部）高度
			this.tagList()
		},
		computed:{
			scrollH:function(){
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750/winWidth;
				let winHeight = parseInt(sys.windowHeight*winrate) - 966
				return winHeight	
			}
		},
		methods: {
			tagList(){
				// 获取标签
				getQuerylist().then((res) => {
					this.category = res
					this.category.unshift({
						tagName: '全部',
						id: ''
					})
					uni.setStorageSync('category',this.category)
				})
			},
			goUrl(url){
				uni.removeStorage({
					key: 'selectedImgsList'
				})
				uni.removeStorage({
					key: 'selectedImgsData'
				})
				uni.navigateTo({
					url
				})
			},
			goH5Url(){
				uni.navigateTo({
					url: '/pagesA/ai/index'
				})
			},
			wxLogin(){
				wx.login({
					success: wxRes => {
						let code = wxRes.code
						userWxLogin({code:code}).then((res) => {
							console.log('res',res)
							uni.setStorageSync('userInfo',res)
							uni.setStorageSync('token',res.token)
							this.tagList()
						}).catch((err) => {
							uni.showToast({
								title: "登录失败！",
								icon: 'none'
							})
						})
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.top-hed {
	   width: 100%;
	   text-align:center;
	   color: white;
	   font-weight:bold;
	   position: fixed;
	   top: 0;
	   left: 0;
	   z-index: 9;
	   .cont{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   height: 100%;
	   }
	   // background:linear-gradient(to right, rgb(173, 225, 255) , #614AF8);
	}
	.home-box{
		overflow: hidden;
		padding-bottom: 150rpx;
		.bg{
			width: 100%;
			height: 966rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
	}
	.tab{
		// margin-top: 814rpx;
		margin-top: 714rpx;
		.item{
			width: 670rpx;
			margin: 0 auto;
			margin-bottom: 34rpx;
			position: relative;
			image{
				width: 670rpx;
				height: 266rpx;
			}
			.cont-txt{
				font-size: 70rpx;
				color: #fff;
				width: 90%;
				position: absolute;
				top: 45rpx;
				left: 36rpx;
			}
			.desc{
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				.l{
					flex: 1;
				}
				.play{
					width: 56rpx;
					height: 56rpx;
					float: right;
					vertical-align: middle;
				}
			}
		}
		.item:last-child{
			margin-bottom: 0;
		}
	}
	.content {
		/* display: flex; */
		/* flex-direction: column; */
		/* align-items: center; */
		/* justify-content: center; */
	}
</style>
